.process-log-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 10px;

  .process-log-logs {
    width: 360px;
    height: 100%;
    border-right: solid 1px #dbdbdb;
    overflow: hidden;

    .process-log-logs-sort {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      box-shadow: 0 3px 6px 0 hsl(0deg 0% 85.38%);
      cursor: pointer;

      &>span {
        &:hover {
          color: #ccc !important;
        }
      }
    }

    .process-log-logs-content {
      padding: 0 10px;
      height: calc(100% - 32px);
      overflow-y: auto;

      .process-log-logs-content-item {
        margin-top: 10px;
        padding: 10px;
        border-radius: 4px;

        &:hover {
          background: #f9f9f9;
        }

        &.selected {
          background: #ebebeb;
        }

        .process-log-logs-content-item-header {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &>div {
            display: flex;
            align-items: center;

            .anticon {
              width: 22px;
            }

            .process-log-logs-content-item-header-userTask {
              font-size: 16px;
              color: #333;
              margin: 0 16px 0 8px;
            }

            .process-log-logs-content-item-header-step {
              font-size: 14px;
              font-weight: bold;
              margin-top: 4px;
            }
          }

          .process-log-logs-content-item-header-icon {
            color: #e3e3e3;
            font-size: 20px;
            cursor: pointer;

            &:hover {
              scale: 1.1;
              color: #cacaca;
            }
          }
        }

        .process-log-logs-content-item-body {
          margin-left: 10px;
          border-left: 1px solid #ddd;
          overflow: hidden;

          .process-log-logs-content-item-body-item {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;

            &:nth-last-child(1) {
              margin-bottom: 0;
            }

            .process-log-logs-content-item-body-item-user {
              display: flex;
              align-items: center;

              .process-log-logs-content-item-body-item-userName {
                font-size: 12px;
                color: #333;
              }
            }

            .process-log-logs-content-item-body-item-other {
              font-size: 12px;
              color: #707070;
            }
          }

          .process-log-logs-content-item-body-item-body {
            font-size: 12px;
            color: #707070;
            margin-left: 58px;

            .process-log-logs-content-item-body-item-body-commentText {
              font-size: 12px;
              color: #707070;
            }
          }
        }
      }
    }
  }

  .process-log-bpmn-wrapper {
    flex: 1;
    height: 100%;
  }
}